<template>
  <div ref="chart"></div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts'
import 'echarts-wordcloud';

const chart = ref();
// 配置 ECharts 的选项

const option = reactive({

  backgroundColor: 'rgba(0,0,0,0)',
  tooltip: {
    show: true
  },
  series: [{
    name: '热点分析',
    type: 'wordCloud',
    // size: ['9%', '99%'],
    sizeRange: [14, 20],//最小文字——最大文字
    // textRotation: [0, 45, 90, -45],
    rotationRange: [0, 0],//旋转角度区间
    // rotationStep: 90,//旋转角度间隔
    shape: 'circle',
    gridSize: 10,//字符间距
    textPadding: 0,
    autoSize: {
      enable: true,
      minSize: 6
    },
    textStyle: {
      color: function () {
        return 'rgb(' + [
          Math.round(Math.random() * 105) + 150,
          Math.round(Math.random() * 105) + 150,
          Math.round(Math.random() * 105) + 150
        ].join(',') + ')';
      },
      normal: {
        borderColor: '#0ff',
        borderWidth: 1,
        borderRadius: 20,
        padding: [8, 10, 5, 10],
        backgroundColor: 'rgba(0,0,0,0)'
      },
      emphasis: {
        shadowBlur: 10,
        shadowColor: '#333'
      }
    },
    data: [{
      name: "作息规律",
      value: 666
    }, {
      name: "热爱学习",
      value: 550
    }, {
      name: "平易近人",
      value: "999"
    }, {
      name: "成绩优秀",
      value: "888"
    }, {
      name: "计算机",
      value: "777"
    }, {
      name: "人工智能",
      value: "688"
    }, {
      name: "互联网",
      value: "588"
    }, {
      name: "大数据",
      value: "516"
    }, {
      name: "网络安全",
      value: "515"
    }, {
      name: "小动物保护协会",
      value: "483"
    }, {
      name: "计算机协会",
      value: "462"
    }, {
      name: "优秀大学生",
      value: "449"
    }, {
      name: "共青团员",
      value: "429"
    }, {
      name: "大三",
      value: "407"
    }, {
      name: "智能科学",
      value: "406"
    }]
  }]
});
onMounted(() => {
  const myChart = echarts.init(chart.value)
  myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
})

</script>

<style lang="less" scoped></style>